<template>
  <div class="yinhsouye">
    <div class="tux">
      <div class="yuan1">
        <div>
          <span class="shuzi">{{ totalBills }}</span>
        </div>
        <div><span class="wenzi2222">票据总数</span></div>
      </div>
      <div class="yuan2">
        <div>
          <span class="shuzi">{{ totalEntrust }}</span>
        </div>
        <div><span class="wenzi2222">委托票据数</span></div>
      </div>
      <div class="yuan3">
        <div>
          <span class="shuzi">{{ totalEntrusting }}</span>
        </div>
        <div><span class="wenzi2222">交易中委托数</span></div>
      </div>
      <div class="yuan4">
        <div>
          <span class="shuzi">{{ totalAccounts }}</span>
        </div>
        <div><span class="wenzi2222">用户总数</span></div>
      </div>
    </div>
    <div class="echart">
      <div>
        <div>
          <div
            id="myChart"
            :style="{ width: '580px', height: '385px' }"
            class="echt"
          ></div>
        </div>
        <div>
          <div
            id="chartLineBox"
            :style="{ width: '580px', height: '385px' }"
            class="echt3"
          ></div>
        </div>
      </div>
      <div>
        <div>
          <div
            id="myChart3"
            :style="{ width: '560px', height: '385px' }"
            class="echt2"
          ></div>
        </div>
        <div>
          <div class="waik2">
            <div style="display: inline-flex; margin-top: 10px">
              <div class="sxx"></div>
              <span style="margin-left: 17px; font-size: 20px; color: #051232"
                >累计交易量top5</span
              >
            </div>
            <div class="lieb">
              <div v-for="(item2, index) in bankTransactionRank" class="yssss33">
                <img v-if="index == 0" src="../../assets/1.png" />
                <img v-if="index == 1" src="../../assets/2.png" />
                <img v-if="index == 2" src="../../assets/3.png" />
                <span v-if="index > 2" class="indd">{{ index + 1 }}</span>
                <span class="yinh">{{ item2.name }}</span>
                <span class="bi">{{ item2.num }}笔</span>
                <span class="zhi2">{{ item2.price}}万元</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getIndexDataMaga } from "@/api/leagues/app";
export default {
  data() {
    return {
      totalTransactionRank: [],
      totalAccounts: "",
      totalBills: "",
      totalEntrust: "",
      totalEntrusting: "",
      bankTransactionRank: [],
      entrustTrend: {},
      priceTrend: {},
      transactionTrend: {},
    };
  },
  mounted() {
    this.querychart();
  },
  //方法集合
  methods: {
    querychart() {
      getIndexDataMaga().then((data) => {
        if (data.data.data) {
          this.priceTrend = data.data.data.priceTrend; //成交价格变化趋势
          console.log(this.priceTrend.X, " this.priceTrend.X");
          console.log(this.priceTrend.Y, "this.priceTrend.Y");
          this.bankTransactionRank = data.data.data.bankTransactionRank; //交易量银行TOP 5
          this.entrustTrend = data.data.data.entrustTrend; //当月委托票据趋势图
          this.totalAccounts = data.data.data.totalAccounts;
          this.totalBills = data.data.data.totalBills;
          this.totalEntrust = data.data.data.totalEntrust;
          this.totalEntrusting = data.data.data.totalEntrusting;
          this.transactionTrend = data.data.data.transactionTrend; //	当月交易完成量趋势图
          console.log(this.transactionTrend.X, "1111");
          console.log(this.transactionTrend.Y, "22");
          console.log(this.transactionTrend.Y.yMoney, "33");
          console.log(this.transactionTrend.Y.yNum, "44");
          this.drawLine();
          this.drawLine2();
          this.drawLine3();
        }
      });
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "当月委托票据趋势图" },
        tooltip: {},
        xAxis: {
          data: this.entrustTrend.X,
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: this.entrustTrend.Y,
          },
        ],
      });
    },
    drawLine3() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart3"));
      // 绘制图表
      myChart.setOption({
        title: { text: "成交价格变化趋势" },
        tooltip: {},
        xAxis: {
          data: this.priceTrend.X,
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: this.priceTrend.Y,
          },
        ],
      });
    },
    drawLine2() {
      let myChart2 = this.$echarts.init(
        document.getElementById("chartLineBox")
      );
      // 指定图表的配置项和数据
      myChart2.setOption({
        title: { text: "当月交易完成量趋势图" },
        tooltip: {
          //设置tip提示
          trigger: "axis",
        },

        legend: {
          //设置区分（哪条线属于什么）
          data: ["交易笔数", "交易金额"],
        },
        color: ["#8AE09F", "#FA6F53"], //设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {
          //设置x轴
          type: "category",
          boundaryGap: false, //坐标轴两边不留白
          data: this.transactionTrend.X,
          name: "", //X轴 name
          nameTextStyle: {
            //坐标轴名称的文字样式
            color: "#FA6F53",
            fontSize: 16,
            padding: [0, 0, 0, 20],
          },
          axisLine: {
            //坐标轴轴线相关设置。
            lineStyle: {
              color: "#0075FF",
            },
          },
        },
        yAxis: {
          name: "",
          nameTextStyle: {
            color: "#051232",
            fontSize: 20,
            padding: [0, 0, 10, 0],
          },
          axisLine: {
            lineStyle: {
              color: "#FA6F53",
            },
          },
          type: "value",
        },
        series: [
          {
            name: "交易笔数",
            data: this.transactionTrend.Y.yNum,
            type: "line", // 类型为折线图
            lineStyle: {
              // 线条样式 => 必须使用normal属性
              normal: {
                color: "#15BE6B",
              },
            },
          },
          {
            name: "交易金额",
            data: this.transactionTrend.Y.yMoney,
            type: "line",
            lineStyle: {
              normal: {
                color: "#FE680E",
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.tux {
  display: flex;
  padding: 26px;
}
.shuzi {
  width: 69px;
  height: 23px;
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #ffffff;
  line-height: 64px;
}
.wenzi2222 {
  width: 79px;
  height: 19px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 4px;
  opacity: 0.8;
}
.indd {
  width: 10px;
  height: 14px;
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #051232;
  opacity: 0.5;
  margin-left: 10px;
  vertical-align: middle;
  overflow: hidden;
}
.yssss33 {
 display: inline-block;
    text-align: center;
    /* width: 421px; */
    overflow: hidden;
    vertical-align: middle;
    /* margin-left: -18px; */
    height: 76px;
}
.echt {
  width: 560px;
  height: 385px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
}
.echt2 {
  width: 560px;
  height: 385px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin-left: 10px;
}
.echt3 {
  width: 560px;
  height: 385px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin-top: 10px;
}
.echart {
  display: flex;
  margin-left: 20px;
}
.yinhsouye {
  width: 1200px;
  height: 882px;
  /* background: #ffffff; */
  /* box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06); */
  border-radius: 6px 6px 10px 10px;
  margin: 0 auto;
  position: relative;
  top: 50%;
}
.yuan1 {
  width: 285px;
  height: 113px;
  background: linear-gradient(-18deg, #91caff, #5fa4e6);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  text-align: center;
}
.yuan2 {
  width: 285px;
  height: 113px;
  background: linear-gradient(-18deg, #5de4b5, #36d29c);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin-left: 10px;
  text-align: center;
}
.waik2 {
  width: 560px;
  height: 385px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin-left: 10px;
  margin-top: 10px;
}
.sxx {
  width: 3px;
  height: 27px;
  background: #0075ff;
}
.lieb {
  margin-left: 35px;
  margin-top: 13px;
}
.yinh {
  width: 111px;
  height: 234px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #051232;
  line-height: 55px;
  margin-left: 20px;
}
.zhi2 {
  width: 36px;
  height: 232px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #fe680e;
  line-height: 55px;
  margin-left: 72px;
}
.bi {
  width: 32px;
  height: 235px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #051232;
  line-height: 55px;
  margin-left: 158px;
}
.yuan3 {
  width: 285px;
  height: 113px;
  background: linear-gradient(-18deg, #bd8bf0, #ac73e8);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin-left: 10px;
  text-align: center;
}
.yuan4 {
  width: 285px;
  height: 113px;
  background: linear-gradient(-18deg, #9aa6f6, #7a89ee);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin-left: 10px;
  text-align: center;
}
</style>
